<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="./iconfont/iconfont.css">
        <link rel="stylesheet" href="./css/base.css">
        <link rel="stylesheet" href="./css/common.css">
        <link rel="stylesheet" href="./css/index.css">
    </head>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--第一层  头部 -->
     <div class="toubu wrapper">
        <!-- log -->
    <img src="./images/logo.png" alt="">
<img src="./images/new.gif" alt="">
<!-- 头部导航栏 -->
<ul>
    <li><a href="#">小米手机</a></li>

    <li><a href="#">红米</a></li>

    <li><a href="#">平板</a></li>

    <li><a href="#">电视</a></li>

    <li><a href="#">盒子</a></li>

    <li><a href="#">影音</a></li>

    <li><a href="#">路由器</a></li>

    <li><a href="#">智能硬件</a></li>

    <li><a href="#">服务</a></li>
    <li><a href="#">社区</a></li>

</ul>
     </div>
<!-- 第二层 -->
     <div class="txt1 wrapper"> 
     <img src="./images/banner.png" alt="">
    <!-- 侧导航 ul -->
    <div class="subnav">
        <ul>
            <li>
                <div><a href="#" class="classify">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">电视</a><a href="#">盒子</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">路由器</a><a href="#">智能硬件</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">移动电源</a><a href="#">插线板</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">耳机</a><a href="#">音箱</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">电池</a><a href="#">存储卡</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">保护套</a><a href="#">后盖</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
            <li>
                <div><a href="#" class="classify">米兔</a><a href="#">服装</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
         
    
            <li>
                <div><a href="#" class="classify">箱包</a><a href="#">其他周边</a></div>
    
                <span class="iconfont icon-arrow-right-bold"></span>
    
            </li>
    
    
        </ul>
    
    </div>

     </div>
<!-- 第三层 -->
     <div class="san01 wrapper">
    <div class="hqw">
        <p>我就是一个空色块</p>
        <p>一言不合就这么任性</p>
    </div>
    
    <img src="./images/pro1.png" alt="">
    <img src="./images/pro2.png" alt="">
    <img src="./images/pro3.png" alt="">
     </div>
<!-- 第四层 -->

<div class="recommend wrapper">
    <!-- 标题 -->
    <div class="title">
            <h3>智能硬件</h3>

            <a href="#">查看全部</a>
    </div>

    <!-- 内容 -->
    <div class="bd">
        <img src="./images/girl.jpg" alt="">
        <div class="txt1">
            <ul>
                <li>
                    <a href="#">
                        <div class="txt">
                            <h2>免邮费</h2>
                            <div class="pic"><img src="./images/d1.jpg" alt=""></div>
                            <h4>小米路由器3</h4>
                            <p>四天线设计，更安全更稳定</p>
                            <h5>149元</h5>
                        </div>
                    </a>
                </li>
            <li>
                <a href="#">
                    
                    <div class="txt">
                        <div class="pic"><img src="./images/d2.jpg" alt=""></div>
                        <h4>米家 LED 智能台灯</h4>
                        <p>无可视频闪，亮度色温无级调节</p>
                        <h5>169元</h5>
            
                    </div>
            
                </a>
            
            </li>
       
<li>
    <a href="#">
        <div class="txt">
            <h2>免邮费</h2>
            <div class="pic"><img src="./images/d3.jpg" alt=""></div>
            <h4>小米净水器 厨下式</h4>
            <p>RO反渗透直出纯净水，包邮包安装</p>
            <h5>1999元</h5>

        </div>

    </a>

</li>

<li>
    <a href="#">
        
        <div class="txt">
            <div class="pic"><img src="./images/d4.jpg" alt=""></div>
            <h4>小蚁智能摄像机 夜视版</h4>
            <p>能看能听能说，手机远程观看</p>
            <h5>149元</h5>

        </div>

    </a>

</li>
        </ul>
                <ul>
                    <li>
                        <a href="#">
                            <div class="txt">
                               <div class="pic"><img src="./images/d5.jpg" alt=""></div>
                                <h4>Yeelight床头灯</h4>
                                <p>触摸式操作，给卧室1600万种颜色</p>
                                <h5>249元</h5>
                
                            </div>
                
                        </a>
                
                    </li>
                
                    <li>
                        <a href="#">
                            
                            <div class="txt">
                                <div class="pic"><img src="./images/d6.jpg" alt=""></div>
                                <h4>小米空气净化器2</h4>
                                <p>10分钟，房间空气焕然一新</p>
                                <h5>699元</h5>
                
                            </div>
                
                        </a>
                
                    </li>
                
                    <li>
                        <a href="#">
                            
                            <div class="txt">
                                <h1>享9折</h1>
                                <div class="pic"><img src="./images/d7.jpg" alt=""></div>
                                <h4>小米智能安防套装</h4>
                                <p>智能警戒，为您的家增添一份安心</p>
                                <h5>169元</h5>
                            </div>
                
                        </a>
                
                    </li>
                
                    <li>
                        <a href="#">
                            
                            <div class="txt">
                                <div class="pic"><img src="./images/d8.jpg" alt=""></div>
                                <h4>米家iHealth血压计</h4>
                                <p>爸妈上手就会用的智能血压计</p>
                                <h5>399元</h5>
                            </div>
                
                        </a>
                
                    </li>
                
                </ul>
        </div>

    </div>

</div>
<!-- 第五层 -->
<div  class="diwu wrapper">
    <div class="left">
        <dl>
            <dt>帮助中心</dt>
    
            <dd><a href="#">账户管理</a></dd>
    
            <dd><a href="#">购物指南</a></dd>
    
            <dd><a href="#">订单操作</a></dd>
    
        </dl>
    
        <dl>
            <dt>服务支持</dt>
    
            <dd><a href="#">售后政策</a></dd>
    
            <dd><a href="#">自助服务</a></dd>
    
            <dd><a href="#">相关下载</a></dd>
    
        </dl>
    
        <dl>
            <dt>线下门店</dt>
    
            <dd><a href="#">小米之家</a></dd>
    
            <dd><a href="#">服务网点</a></dd>
    
            <dd><a href="#">零售网点</a></dd>
    
        </dl>
    
        <dl>
            <dt>关于小米</dt>
    
            <dd><a href="#">了解小米</a></dd>
    
            <dd><a href="#">加入小米</a></dd>
    
            <dd><a href="#">联系我们</a></dd>
    
        </dl>
        <dl>
            <dt>关注我们</dt>

            <dd><a href="#">新浪微博</a></dd>

            <dd><a href="#">小米部落</a></dd>

            <dd><a href="#">官方微信</a></dd>

        </dl>
        <dl>
            <dt>特色服务</dt>

            <dd><a href="#">F 码通道</a></dd>

            <dd><a href="#">小米移动</a></dd>

            <dd><a href="#">防伪查询</a></dd>
        </dl>
        <div class="did">
            <h1>400-100-5678</h1>
            <h2>周一至周日 8:00-18:00</h2>
            <h2>（仅收市话费）</h2>
        </div>
    </div>
<div>

</div>

</div>
</body>
</html>